<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>FreeMarker Web</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 960px;
            background: #fff;
            max-width: 1024px;
            margin: 0 auto;
        }

        #main2 {
            margin-top: -120px;
        }

        .one,
        .two {
            position: relative;
        }

        .one .title {
            position: absolute;
            top: 120px;
            font-size: 16px;
            font-weight: 400;
            color: #585858;
            -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
        }

        .two .title {
            position: absolute;
            top: 120px;
            left: 10px;
            font-size: 16px;
            font-weight: 700;
            color: #585858;
            -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
        }

        .one .sub {
            position: absolute;
            bottom: 76px;
            font-style: italic;
            font-size: 12px;
            z-index: 2;
            letter-spacing: 1px;
        }

        .one .sub1 {
            left: 300px;
        }

        .one .sub2 {
            left: 500px;
        }
    </style>

    <script src="/static/js/jquery-3.3.1.min.js"></script>
    <script src="/static/js/vue.min.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>


</head>
<body>

<div id="app">
<#--{{ message }}-->

    <table class="table table-striped">
        <caption>条纹表格布局</caption>
        <thead>
        <tr>
            <th>编号</th>
            <th>名称</th>
            <th>状态</th>
        </tr>
        </thead>
        <tbody>
        <tr>
        <#--<td>Tanmay</td>-->
        <#--<td>Bangalore</td>-->
        <#--<td>560001</td>-->

            <li v-for="item in list">
                {{ item.id }}  {{ item.name }} {{ item.status }}
            </li>
        </tr>

        </tbody>
    </table>
</div>


<script>


    $(function () {
        f1();
    });

    function f1() {
        $.ajax({
            url: '/all',
            method: 'get',
            dataType: 'json',
            success: function (re) {
                var app = new Vue({
                    el: '#app',
                    data: re.data
                });
            }
        })
    }
</script>

</body>
</html>